<template>
	<view>
		<view :style="style">
			<view class="bg-gradual-blue cu-bg-top"></view>
			<view class="bg-white"></view>
			<view class="cf padding">
				<text class=""></text>
				<text class="cuIcon-settings fr" @click="topSettingClicked"></text>
			</view>
			<view class="flex flex-wrap padding">
				<view class="cu-user-container basis-xl flex flex-direction">
					<text class="text-bold text-white text-lg">赤域吧</text>
					<text class="text-white padding-top-xs">ID: 666666666</text>
				</view>
				<view class="cu-avatar round lg margin-left" v-for="(item, index) in avatar" :key="index" :style="[{ backgroundImage: 'url(' + avatar[index] + ')' }]">
					<view class="cu-tag badge" :class="index % 2 == 0 ? 'cuIcon-female bg-pink' : 'cuIcon-male bg-blue'"></view>
				</view>
			</view>
			<view class="cu-mid-menu padding">
				<view class="cu-list grid col-3 no-border cu-radius-md shadow shadow-blur">
					<view class="cu-item" v-for="(item, index) in cuIconList" :key="index" @click="topMenuItemClicked(item)">
						<view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
							<view class="cu-tag badge" v-if="item.badge != 0">
								<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
							</view>
						</view>
						<text class="text-black">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="cu-list menu card-menu margin-sm cu-margin-top0">
				<block v-for="(item, index) in btmListArr" :key="index">
					<view class="cu-item arrow" @click="btmItemClicked(item)">
						<view class="content">
							<text :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]"></text>
							<text :class="item.color">{{ item.name }}</text>
						</view>
					</view>
				</block>
			</view>
			<view class="text-center margin">软件版本： v1.0 By 不随</view>

			<u-tabbar :list="tabbar" active-color="#2b85e4"></u-tabbar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			bgImage: {
				type: String,
				default: 'bg-gradual-blue'
			},
			title: '我的',
			tabbar: '',
			avatar: ['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'],
			cuIconList: [
				{
					id: 0,
					cuIcon: 'favor',
					color: 'red',
					badge: 0,
					name: '我的收藏',
					navUrl: '../../pages/mypages/my-collect/my-collect'
				},
				{
					id: 1,
					cuIcon: 'footprint',
					color: 'yellow',
					badge: 0,
					name: '我的足迹',
					navUrl: '../../pages/mypages/history-record/history-record'
				}
			],
			btmListArr: [
				{
					id: 0,
					cuIcon: 'medal',
					color: 'blue',
					badge: 0,
					name: '关于我们',
					navUrl: '../../pages/mypages/about/about'
				},
				{
					id: 1,
					cuIcon: 'redpacket',
					color: 'red',
					badge: 0,
					name: '赞赏支持',
					navUrl: '../../pages/mypages/appreciate/appreciate'
				},
				{
					id: 2,
					cuIcon: 'edit',
					color: 'cyan',
					badge: 0,
					name: '意见反馈',
					navUrl: ''
				},
				{
					id: 3,
					cuIcon: 'warn',
					color: 'yellow',
					badge: 0,
					name: '免责声明',
					navUrl: '../../pages/mypages/disclaimer/disclaimer'
				},
				{
					id: 4,
					cuIcon: 'share',
					color: 'green',
					badge: 0,
					name: '分享软件',
					navUrl: ''
				},
				{
					id: 5,
					cuIcon: 'delete',
					color: 'red',
					badge: 0,
					name: '清空缓存',
					navUrl: ''
				},
				{
					id: 6,
					cuIcon: 'time',
					color: 'pink',
					badge: 0,
					name: '更新历史',
					navUrl: '../../pages/mypages/update-history/update-history'
				}
			]
		};
	},
	computed: {
		style() {
			var StatusBar = this.StatusBar;
			var CustomBar = this.CustomBar;
			var bgImage = this.bgImage;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
			if (this.bgImage) {
				style = `${style}background-image:url(${bgImage});`;
			}
			return style;
		}
	},
	onLoad() {
		/**
		 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
		 */
		this.tabbar = uni.$AppConfig.tabbars;
	},
	// #ifdef MP-WEIXIN
	onShareTimeline() {
		return {
			title: '赤域吧免费资源搜索神器',
			query: '../../pages/index/index',
		};
	},

	onShareAppMessage(res) {
		return {
			title: '赤域吧免费资源搜索神器',
			path: '../../pages/index/index',
			desc: '搜集全网最全网络资源',
			content: '搜集全网最全网络资源',
			success(res) {
				uni.showToast({
					title: '分享成功'
				});
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				});
			}
		};
	},
	// #endif
	methods: {
		topSettingClicked() {
			uni.navigateTo({
				url: item.navUrl
			});
		},
		btmItemClicked(item) {
			const _this = this;
			switch (item.id) {
				case 2:
					{
						uni.showModal({
							content: '邮件：chiyuba@qq.com; 微信：chiyuba666; QQ: 289239848'
						});
					}
					break;
				case 4:
					{
						// #ifndef MP-WEIXIN
						uni.share({
							provider: 'weixin',
							scene: 'WXSenceTimeline',
							type: 1,
							summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
							success: function(res) {
								uni.showModal({
									content: '分享成功~'
								});
							},
							fail: function(err) {
								uni.showModal({
									content: '分享失败~'
								});
							}
						});
						// #endif

						// #ifdef MP-WEIXIN
						uni.showToast({
							title: '请点击顶部小程序自带菜单项分享！',
							icon: 'none'
						});
						// #endif
					}
					break;
				case 5:
					{
						uni.showModal({
							title: '缓存清空提示',
							content: '确认清空数据缓存吗？',
							success(res) {
								if (res.confirm) {
									uni.clearStorage();
									uni.clearStorageSync();
									uni.showToast({
										title: '缓存已清空！',
										icon: 'none'
									});
								}
							}
						});
					}
					break;
				default: {
					uni.navigateTo({
						url: item.navUrl
					});
				}
			}
		}, // btmItemClicked
		topMenuItemClicked(item) {
			uni.navigateTo({
				url: item.navUrl
			});
			// uni.showToast({
			// 	title: '功能完善中~',
			// 	icon: 'none'
			// })
		}
	}
};
</script>

<style>
.cu-bg-top {
	position: absolute;
	width: 100%;
	height: 380upx;
	z-index: -1;
	border-bottom-left-radius: 20upx;
	border-bottom-right-radius: 20upx;
}
.cu-radius-md {
	border-radius: 20upx;
}
.cu-margin-top0 {
	margin-top: 0;
}
</style>
